/**
 * 审核列表筛选
 */
<template>
	<view v-if="showFilter" class="fa-dropdown" style="border-top: 1px solid #ECECF0;">
		<view class="slot-content bg-ff px-1 pb-1 pt-m2 pos-re" style="z-index: 10;">
			<h3 class="font28 f-w700 col-main pb-1">所属房产</h3>
			<view>
				<scroll-view scroll-y="true" style="max-height: 300rpx;">
					<ul class="fa-sc-list">
						<li v-for="(item, idx) in area" :key="item.ID" :class="{active : item.check}" @click="item.check = !item.check">{{ item.OrgName }}</li>
						<li style="width:0;height: 0;padding: 0;"></li>
					</ul>
				</scroll-view>
			</view>
			<h3 class="font28 f-w700 col-main pb-1">处置类型</h3>
			<view>
				<ul class="fa-sc-list">
					<li v-for="(item, idx) in status" :key="idx" :class="{active : item.check}" @click="item.check = !item.check">{{ item.DictValue }}</li>
					<li style="width:0;height: 0;padding: 0;"></li>
				</ul>
				<u-row gutter="0" class="pt-1 u-border-top">
					<u-col span="3" class="text-center">
						<view class="font28" @click="resetCheckData"><u-icon class="pr-m1" name=" iconfont icon-icon_Reset" size="40"></u-icon>重置</view>
					</u-col>
					<u-col span="9"><u-button class="btn-grad" type="primary" @click="confirm" shape="circle">查看</u-button></u-col>
				</u-row>
			</view>
		</view>
		
		<u-mask :show="showFilter" @click="$emit('funShow', false)" :custom-style="{'z-index': 9, top: '600rpx'}"></u-mask>
	</view>
</template>

<script>
	export default {
		props: {
			showFilter: {
				type: Boolean,
				default: false
			},
			area: {
			    type: Array,
				default: []
			},
			status: {
			    type: Array,
				default: []
			},
			resetFilter: { // 重置筛选条件
				type: Number,
				default: 0
			},
			changeTab: { // 值改变且大于零时，重置全部筛选
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				cacheFilter: {
					area: null,
					status: null
				}
			}
		},
		created() {
			
		},
		mounted() {
			setTimeout(() => {
				this.cacheFilterData()
			}, 500);
		},
		watch: {
			showFilter(nval, oval) {
				if (nval) {
					this.openDrop()
				}
			},
			changeTab(nval, oval) {
				if (nval > 0) {
					this.resetCheckData();
					this.cacheFilterData();
					this.openDrop();
				}
			}
		},
		methods: {
			// 重置选项
			resetCheckData() {
				this.area.forEach(ele => {
					ele.check = false
				})
				this.status.forEach(ele => {
					ele.check = false
				})
			},
			
			// 确认筛选
			confirm() {
				let orgGuids = [], handleTypes = [];
				orgGuids = this.area.filter(v => v.check).map(v => v.ID);
				handleTypes = this.status.filter(v => v.check).map(v => v.DictKey);
				this.cacheFilter.area = JSON.stringify(this.area);
				this.cacheFilter.status = JSON.stringify(this.status);
				this.$emit('funFilter', {orgGuids, handleTypes})
				this.$emit('funShow', false)
			},
			
			// 打开Drop
			openDrop() {
				this.$emit('funOpen', {
					area: this.cacheFilter.area,
					status: this.cacheFilter.status
				})
			},
			
			// 缓存数据
			cacheFilterData() {
				this.cacheFilter.area = JSON.stringify(this.area);
				this.cacheFilter.status = JSON.stringify(this.status);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fa-dropdown {
		.fa-sc-list {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			li {
				position: relative;
				flex: 0 0 28%;
				display: inline-block;
				margin-bottom: 26rpx;
				font-size: 24rpx;
				color: #2A2A2A;
				text-align: center;
				background-color: #F6F8FB;
				border-radius: 4rpx;
				padding: 17rpx 6rpx;
			}
		}
		.fa-sc-date {
			li {
				flex: 0 0 20%;
			}
		}
		.active {
			background-color: #ECF4FF !important;
			color: #2E73E5 !important;
		}
	}
</style>
